<template>
    <div class="tab-group">
        <div class="tab-group_item" :class="[activeTabIndex == index ? 'act' : 'def']" v-for="(item, index) in tabData"
            @click="changeTab(item, index)" :key="index">{{ item.label }}</div>
    </div>
</template>

<script setup lang="js">
import { ref, watch } from 'vue'
import { useGlobalStore } from '@/store/global';
import { storeToRefs } from 'pinia';
import { fetchCardFilter } from "@/api/global"

const emits = defineEmits(["handleFieldChange"])

const props = defineProps({
    data: {
        default: () => ({
            type: "", // 组件类型
            url: "", // 组件数据接口地址
            field: "" // 传给后端的key 属性名称
        })
    }
})

const globalStore = useGlobalStore()

const { globalSearchForm } = storeToRefs(globalStore)

const tabData = ref([])

const activeTabIndex = ref(0)

// 初始化数据
const initData = async () => {
    tabData.value = [
        { label: "总览", id: 1 },
        { label: "省内", id: 2 },
        { label: "省外", id: 3 }
    ]
    emits("handleFieldChange", props.data.field, tabData.value[activeTabIndex.value].id)
    //const res = await fetchCardFilter(props.data.url, { ...globalSearchForm.value, cardId: props.data.cardId })
}

// 监听左上角 区域 以及 日期时间
watch(() => globalSearchForm.value, (form) => {
    // 判断非空对象
    if (Object.keys(form).length !== 0) {
        initData()
    }
}, { immediate: true })

// 切换tab
const changeTab = (item, index) => {
    activeTabIndex.value = index
    emits("handleFieldChange", props.data.field, tabData.value[index].id)
}
</script>
<style scoped lang="scss">
.tab-group {
    display: flex;

    .tab-group_item {
        padding: vh(8) vw(11) vh(8) vw(11);
        border-radius: vw(5);
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: vw(10);
        color: #BCCBCC;
        margin-right: vw(8);
        cursor: pointer;
    }

    .act {
        background: rgba(18, 68, 87, 1);
    }

    .def {
        background: rgba(18, 68, 87, 0.25);
    }
}
</style>